import { BasicColumn, FormSchema } from '/@/components/Table';
import { Tag, Tooltip, Image } from 'ant-design-vue';
import { h } from 'vue';
import { useLocale } from '@/locales/useLocale';
import { useLocalLangurage } from '@/settings/localeSetting';
import { getDataTypePreviewUrl } from '/@/utils/helper/paramsHelper';
import { useI18n } from '/@/hooks/web/useI18n';
import dayjs from 'dayjs';
import { toTimezone } from '/@/utils/dateUtil';

const { t } = useI18n();
console.log(useLocalLangurage())
const { getLanguageField } = useLocale();
const  localeListLangurage  = useLocalLangurage();

const setTooltip = (text) => {
  return h(
    Tooltip,
    {
      title: text,
    },
    () =>
      h(
        'div',
        {
          style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' },
        },
        text,
      ),
  );
};

// 表格内容
export const baseColumns: BasicColumn[] = [
  {
    title: t('table.system.system_game_platform'),
    dataIndex: 'name',
    minWidth: 170,
    customRender: ({ record }) => {
      return record.name;
    },
  },
  // {
  //   title: '场馆LOGO',
  //   dataIndex: 'logo',
  //   customRender: ({ record }) => {
  //     return h(Image, { src: getDataTypePreviewUrl(record.logo) });
  //   },
  // },
  {
    title: t('table.system.system_game_number'),
    minWidth: 170,
    dataIndex: 'game_num',
  },
  {
    title: t('table.system.system_supported_currencies'),
    dataIndex: 'currency',
    minWidth: 200,
    slots: { customRender: 'currency' },
    // customRender: ({ record }) => {
    //   const currency = record.currency ? JSON.parse(record.currency) : [];
    //   const list = currency.join(', ');
    //   return setTooltip(list);
    // },
  },
  {
    title: t('table.system.system_supported_languages'),
    dataIndex: 'lang',
    minWidth: 220,
    customRender: ({ record }) => {
      const lang = record.lang ? JSON.parse(record.lang) : [];
      //const list = lang.join(',');
      const listArr = [];
      console.log(lang);
      //console.log(localeListLangurage);
      lang.forEach((item) => {
        //console.log(localeListLangurage);
        listArr.push(localeListLangurage[item] as never);
      });
      // for (const v of lang) {
      //   listArr.push(localeListLangurage[v] as never);
      //   console.log(v);
      // }
      //return setTooltip(list);
      return listArr.join(',');
    },
  },
  {
    title: t('table.system.system_game_show'),
    dataIndex: 'state',
    minWidth: 140,
    customRender: ({ record }) => {
      const state = record.state == 1;
      const color = state ? '#1CD91C' : '#E91134';
      const text = state ? t('business.common_normal') : t('business.common_deactivate');
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: t('business.common_update_time'),
    dataIndex: 'updated_at',
    minWidth: 260,
    customRender: ({ record }) => {
      return toTimezone(record.updated_at, 'YYYY-MM-DD HH:mm:ss');
    },
  },
  {
    title: t('table.member.member_oprate_people'),
    minWidth: 220,
    dataIndex: 'updated_name',
  },
];

export const platformFormSchema: FormSchema[] = [
  {
    field: getLanguageField('name'),
    label: t('table.system.system_game_sort'),
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'seq',
    label: t('table.system.system_game_sort0'),
    component: 'InputNumber',
    required: true,
  },
  // {
  //   field: 'img',
  //   label: '游戏图标',
  //   component: 'Input',
  //   slot: 'upload-img',
  // },
  // {
  //   field: 'lang',
  //   label: '支持语言',
  //   component: 'Select',
  //   componentProps: () => {
  //     const option = localeList.map((item) => {
  //       return { label: item.text, value: item.event };
  //     });
  //     return {
  //       mode: 'multiple',
  //       options: option,
  //       getPopupContainer: () => document.body,
  //     };
  //   },
  // },
  // {
  //   field: 'currency',
  //   label: '支持币种',
  //   component: 'Select',
  //   componentProps: {
  //     mode: 'multiple',
  //     options: currencyList,
  //     getPopupContainer: () => document.body,
  //   },
  // },
];
